<template>
  <Card>
    <!-- <Row class="operation">
      <Button @click="handleAsyncRegion" :loading="asyncLoading" type="primary" icon="md-add">同步数据</Button>
    </Row> -->
    <div class="flex">
      <Tree class="tree" :data="data" :load-data="loadData" @on-select-change="changeTree"></Tree>
      <div class="form">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
          <FormItem v-if="formValidate.adCode" prop="adCode" label="区域编码">
            <Input v-model="formValidate.adCode" disabled style="width: 300px" />
          </FormItem>
          <FormItem label="城市代码" prop="cityCode">
            <Input v-model="formValidate.cityCode" disabled style="width: 300px" />
          </FormItem>
          <FormItem label="行政区划级别" prop="cityCode">
            <RadioGroup type="button" button-style="solid" v-model="formValidate.level">
              <Radio disabled label="country">国家</Radio>
              <Radio disabled label="province">省份</Radio>
              <Radio disabled label="city">市</Radio>
              <Radio disabled label="district">区县</Radio>
              <Radio disabled label="street">街道</Radio>
            </RadioGroup>
          </FormItem>

          <FormItem label="经纬度" prop="center">
            <Input v-model="formValidate.center" disabled style="width: 300px" />
          </FormItem>
          <FormItem label="名称" prop="name">
            <Input v-model="formValidate.name" disabled style="width: 300px" />
          </FormItem>
          <!-- <FormItem label="排序" prop="orderNum">
            <Input v-model="formValidate.orderNum" />
          </FormItem> -->

          <div class="button-list">
            <Button type="default" @click="submitsss('formValidate')">修改</Button>
            <!-- <Button type="primary" ghost @click="handleInsert()">添加</Button>
            <Button type="error" @click="handleDel('formValidate')">删除</Button> -->
          </div>
        </Form>
      </div>
    </div>

    <Modal v-model="modalFlag" title="添加" @on-ok="submit">
      <Form ref="addValidate" :model="addValidate" :label-width="100">
        <FormItem label="父级">
          <Input disabled v-model="addValidate.parentName" />
        </FormItem>
        <FormItem prop="adCode" label="区域编码">
          <Input v-model="addValidate.adCode" />
        </FormItem>
        <FormItem label="城市代码" prop="cityCode">
          <Input v-model="addValidate.cityCode" />
        </FormItem>

        <FormItem label="经纬度" prop="center">
          <Input v-model="addValidate.center" />
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="addValidate.name" />
        </FormItem>
        <FormItem label="排序" prop="orderNum">
          <Input v-model="addValidate.orderNum" />
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>
<script>
  import {
    getChildsetting,
    updateRegion,
    delRegion,
    asyncRegion,
    addRegion,
    setSetting
  } from "@/api/index";
  import { handleSubmit } from "./validate";
  export default {
    props: ["res", "type"],
    data() {
      return {
        handleSubmit, // 验证规则
        asyncLoading: false, // 加载状态
        num: 10, // 更新倒计时
        modalFlag: false, // 新增编辑标识
        timerNum: 10, // 定时器
        data: [], // 加载数据
        id: 0, // id
        addValidate: { // 添加级别
          parentName: "无父级",
        },
        formValidate: { // 表单数据
          adCode: "",
          cityCode: "",
          center: "",
          name: "",
          orderNum: "",
          level: "",
        },
        ruleValidate: { // 验证规则
          adCode: [{
            required: true,
            message: "区域编码不能为空",
            trigger: "blur",
          }, ],
          center: [{
            required: true,
            message: "经纬度不能为空",
            trigger: "blur",
          }, ],
          name: [{
            required: true,
            message: "名称不能为空",
            trigger: "blur",
          }, ],
        },
      };
    },
    created() {
      this.initsss()
    },
    mounted() {
      this.init();
    },
    methods: {
      /**添加必填项 */
    initsss() {
      this.res = JSON.parse(this.res);

      this.$set(this, "formValidate", { ...this.res });
      Object.keys(this.res).forEach((item) => {
        this.ruleValidate[item] = [
          {
            required: true,
            message: "请填写必填项",
            trigger: "blur",
          },
        ];
      });
    },
      // 提交数据
      submit() {
        delete this.addValidate.children;
        addRegion(this.addValidate).then((res) => {
          if (res.success) {
            this.$Message.success("添加成功!请稍后查看");
          }
        });
      },

      // 添加
      handleInsert() {
        if (!this.formValidate.parentId) {
          this.$Message.error("请选择要添加的数据");
          return false;
        }
        this.addValidate = JSON.parse(JSON.stringify(this.formValidate));

        let level = ["country", "province", "city", "district", "street"];

        let child;
        level.forEach((item, index) => {
          if (this.addValidate.level == item) {
            if (index == level.length - 1) {
              child = level[index - 1];
            } else {
              child = level[index + 1];
            }
          }
        });

        this.addValidate.level = child;

        this.addValidate.parentId = this.formValidate.id;
        this.addValidate.parentName = this.formValidate.name;

        delete this.addValidate.id;
        delete this.addValidate.createBy;
        delete this.addValidate.createTime;
        delete this.addValidate.updateBy;
        delete this.addValidate.updateTime;
        delete this.addValidate.selected;

        this.addValidate.name = "";
        this.addValidate.center = "";
        this.modalFlag = true;
      },
      // 删除
      handleDel() {
        this.$Modal.confirm({
          title: "确定删除？",
          content: "删除后店铺以及用户地区绑定数据将全部错乱",
          onOk: () => {
            delRegion(this.formValidate.id).then((res) => {
              if (res.success) {
                this.$Message.success("删除成功!,请稍后查看数据");
              }
            });
          },
        });
      },
      submitsss(name) {
        let that = this;
        if (handleSubmit(that, name)) {
          this.setupSetting();
        }
      },
      // 保存设置
      setupSetting() {
        setSetting(this.type, this.formValidate).then((res) => {
          if (res.success) {
            this.$Message.success("保存成功!");
          } else {
            this.$Message.error("保存失败!");
          }
        });
      },
      // 修改
      handleUpdate(name) {
        delete this.formValidate.createBy;
        delete this.formValidate.createTime;
        delete this.formValidate.updateBy;
        delete this.formValidate.updateTime;
        delete this.formValidate.selected;
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.formValidate.adCode ?
              this.formValidate.adCode :
              (this.formValidate.adCode = "");
            updateRegion('DEFAULT_ZONE', this.formValidate).then((res) => {
              if (res.result) {
                this.$Message.success("修改成功!,请稍后查看数据");
              }
            });
          } else {
            this.$Message.error("请选择数据");
          }
        });
      },
      // 树结构点击事件
      changeTree(array, val) {
        this.formValidate = val;
      },
      // 异步加载数据
      loadData(item, callback) {
        item.loading = true;
        getChildsetting(item.id).then((res) => {
          if (res.result.length <= 0) {
            item.loading = false;
          } else {
            let way = [];
            res.result.forEach((child, index) => {
              item.loading = false;
              let data;
              data = {
                ...child,
                title: child.name,
                loading: false,
                children: [],
              };
              if (item.level != "district") {

                if (
                  child.level == "district" ||
                  child.level === 'street'||
                  item.label == "香港特别行政区" ||
                  item.label == "澳门特别行政区"
                ) {
                  data = {
                    ...child,
                    title: child.name,
                  };
                }
              }

              way.push(data);
            });
            callback(way);
          }
        });
      },
      // 初始化数据
      init() {
        getChildsetting(this.id).then((res) => {
          if (res.result) {
            res.result.forEach((item) => {
              let data;

              // 台湾省做处理
              if (item.name == "台湾省") {
                data = {
                  ...item,
                  title: item.name,
                };
              } else {
                data = {
                  ...item,
                  title: item.name,
                  loading: false,
                  children: [],
                };
              }

              this.data.push(data);
            });
          }
        });
      },
      // 同步数据
      handleAsyncRegion() {
        this.num = 10;
        this.$Modal.confirm({
          title: "确定更新？",
          content: "更新后店铺以及用户地区绑定数据将全部错乱",
          onOk: () => {
            let timer;
            let number;

            this.asyncLoading = true

            this.$Message.info({
              duration: this.timerNum,
              render: (h) => {
                return h("span", [
                  `地区数据将在${this.num}秒后更新`,
                  h(
                    "a", {
                      on: {
                        click: () => {
                          this.$Message.destroy();
                          this.asyncLoading = false
                          clearInterval(number);
                          clearTimeout(timer)
                        },
                      },
                    },
                    "点击撤销"
                  ),
                ]);
              },
            });

            number = setInterval(() => {
              this.num--;
            }, 1000);

            timer = setTimeout(() => {
              clearInterval(number)
              asyncRegion().then((res) => {
                this.asyncLoading = false
                this.$Message.loading("地区数据正在更新中！");
              });
            }, 10000);
          },
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  .flex {
    display: flex;
    position: relative;
  }

  .tree {
    flex: 2;
  }

  .form {
    flex: 8;
  }

  .button-list {
    margin-left: 80px;

    >* {
      margin: 0 4px;
    }
  }
</style>
